//element UItable
Vue.component("myTableColumn", {
    props: ["prop", "label"],
    template: `<span></span>`,
    mounted() {
      this.$parent.column.push(this);
    },
  });

Vue.component("myTable2", {
data() {
    return {
    column: [
        //{label: '编号', prop: 'id'}
    ],
    };
},
props: {
    data: {
    type: Array,
    default: [],
    },
},
template: `<table border="1" cellpadding="10" cellspacing="0">
    <thead>
    <tr>
        <th v-for="item in column">{{item.label}}</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="row in data">
    <td v-for="(col, index) in column">
        {{column[index].$scopedSlots.default ? column[index].$scopedSlots.default(row)[0].text : row[col.prop]}}
    </td>
    </tr>

    <slot></slot>
    </tbody>
</table>`,
});




//Vant-table组件
Vue.component('myTable',{
    props:{
        columns:{
            type:Array,
            required:true,
        },
        datas:{
            type:Array,
            required:true,
        }
    },
    template:`
    <table border="1" cellpadding="10" cellspacing="0">
        <thead>
            <tr>
                <th v-for="thItem in columns">{{thItem.title}}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="trItem in datas">
                <td v-for="tdItem in columns">
                <template v-if="tdItem.render">
                <span v-html="tdItem.render(trItem)"></span>
                </template>

                <template v-else="tdItem.render">
                {{trItem[tdItem.key]}}
                </template>

                </td>
                
            </tr>
        </tbody>
    </table>
    `,

})




//分页组件
Vue.component('myPage',{
    props:{
        pagesize:{
            type:Number,
            // default:3,
        },
        total:{
            type:Number,
            // default:15
        }
    },
    data(){
        return {
            totalPage:0
        }
    },
    watch:{
        pagesize: {
            handler(newdata) {
                // console.log(pageSize);
                
                // console.log(newdata);
                
                this.totalPage = Math.ceil(this.total/this.pagesize)

            },
            immediate: true,
        },

    },
    template:`
    <div class="my-page">
        <span v-for="pageNum in totalPage" @click="$emit('click',pageNum)">{{pageNum}}</span>
    </div>
    `
})



//dialog对话框
Vue.component('myDialog',{
    props:{
        visible:false,
        title:''
    },
    template:`
    <div class="my-dialog" v-if='visible'>
        <div class="box">
            <div class="header">{{title}}</div>
            <div class="main">
                <slot></slot>
            </div>
            <div class="footer">
                <button @click="$emit('close')">取消</button>
                <button>确定</button>
            </div>
        </div>
    </div>
    `
})



//loadding组件
Vue.component('myLoading',{
    props:{
        state:{
            type:Boolean,
        
        }
    },
    template:`
    <div class="my-loading" v-if='state'>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    `,

})



//按钮组件
Vue.component('myButton',{
    props:{
        content: {
            type: String,
            required: true,
        },
        type: { 
            type: String,
            default: 'primary'
        }
    },
    template:`
    <button :class="['my-button', 'my-button--'+type, 'my-button--normal']  ">
    <div class="my-button__content">
    <span class="my-button__text">{{content}}</span>
    </div>
    </button>
    `,

})



//导航栏组件
Vue.component('myNavBar',{
    props:{
        title:''
    },
    template:`
    <div class='my-nav-bar'>
    <span @click="$emit('click-left')">返回</span>
    <span>{{title}}</span>
    <span @click="$emit('click-right')"><slot></slot></span>
    </div>
    `,

})

//表单组件
Vue.component('myFormdata',{
    props:{
        state:{
            type:Boolean,
            default:true,
        }
    },
    template:`
    <fieldset><legend>我封装的表单组件</legend>
    用户名：<input type="text" v-model='formdata.uname' />
    密码：<input type="password" v-model='formdata.pwd'/>
   
    <button @click="$emit('submit',formdata)" v-if='state'>提交</button>
    </fieldset>
    `,
    data(){
        return {
            formdata:{
                uname:'',
                pwd:''
            }
        }
    }
})